<template>
    <div id="activityChart" :style="{ width: props.width, height: props.height }"></div>
</template>

<script setup lang="ts">
import { GetOtherStatistics } from '@/controllers/auditController';
import { message } from '@/utils/message';
import * as echarts from 'echarts';
import { onMounted } from 'vue';

const props = defineProps<{ width: string, height: string }>()
let practiceList: number[] = [], activityList: number[] = []
onMounted(async () => {
    try {
        await getOtherStatistics()
        drawChart()
    } catch (error) {
        console.error(error)
    }
});
async function getOtherStatistics()
{
    try {
        const data = await GetOtherStatistics()
        practiceList = data.pratice
        activityList = data.activity
    } catch (error:any) {
        message(error.message, 'error')
    }
}
async function drawChart() {
    const c = document.getElementById('activityChart')
    if (!c) {
        console.error('元素不存在！')
        return
    }
    const chart = echarts.init(c);
    const option: echarts.EChartsOption = {
        title: {
            text: '课外活动参加情况一览'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['社会实践', '课外活动']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2023.9', '2023.10', '2023.11', '2023.12', '2024.1']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '社会实践',
                type: 'line',
                stack: 'Total',
                data: practiceList
            },
            {
                name: '课外活动',
                type: 'line',
                stack: 'Total',
                data: activityList
            }
        ]
    };
    option && chart.setOption(option);
}
</script>